Component({
    /**
     * 侧边栏导航分类列表
     * 组件的属性列表
     * property { String } BarBackground 导航的背景色
     * property { String } BarWidth 导航栏宽度
     * property { String } BarItemBackground 导航选项背景色
     * property { String } BarItemActiveBackground 导航选中项背景色
     * property { String } BarItemColor 导航项文字颜色
     * property { String } BarItemFontSize 导航项文字大小
     * property { String } BarItemActiveColor 导航选中项文字颜色
     * property { String } RenderKey 渲染文字的key
     * property { Number } active 当前选中项的索引
     * property { Boolean } safe_area_inset_bottom 是否适配iphoneX底部安全区域
     * 
     * 组件triggerEvent事件
     * change({index}) 切换选中项
     * touchBottom 触底事件
     */
    externalClasses: ["custom-class"], //组件可继承页面定义样式覆盖组件样式
    properties: {
        BarBackground: {
            type: 'String',
            value: '#FFF'
        },
        BarWidth: {
            type: String,
            value: '200rpx'
        },
        BarItemBackground: {
            type: 'String',
            value: '#F7F8FA'
        },
        BarItemActiveBackground: {
            type: 'String',
            value: '#FFF'
        },
        BarItemColor: {
            type: 'String',
            value: '#999'
        },
        BarItemFontSize: {
            type: 'String',
            value: '28rpx'
        },
        BarItemActiveColor: {
            type: 'String',
            value: '#333'
        },
        RenderKey: {
            type: 'String'
        },
        active: {
            type: Number,
            value: 0
        },
        safe_area_inset_bottom: {
            type: 'Boolean',
            value: true
        },
        data: {
            type: Array,
            value: []
        }
    },
    data: {
        scrollTop: 0, //竖向滚动的位置
    },
    methods: {
        //点击每项
        onBarItemChange({ mark }) {
            const { index } = mark
            let { active } = this.data
            if (index == undefined || index === active) return
            this.triggerEvent('change', index)
        },
        //选项切换时，滚动至中间位置
        scrollCenter(index) {
            if (this.data.data.length === 0) return
            let that = this
            Promise.all([
                that.getAllRect(this, '.side_bar_item'),
                that.getRect(this, '.side_bar_c')
            ]).then(function(_a) {
                var tabRects = _a[0],
                    navRect = _a[1];
                var tabRect = tabRects[index];
                var offsetTop = tabRects
                    .slice(0, index)
                    .reduce(function(prev, curr) {
                        return prev + curr.height;
                    }, 0);
                that.setData({
                    scrollTop: offsetTop - (navRect.height - tabRect.height) / 2
                })
            })
        },
        //触底事件，如果列表需要分页加载
        scrolltolower() {
            this.triggerEvent('scrolltolower')
        },
        getRect(context, selector) {
            return new Promise(function(resolve) {
                wx.createSelectorQuery()
                    .in(context)
                    .select(selector)
                    .boundingClientRect()
                    .exec(function(rect) {
                        if (rect === void 0) {
                            rect = [];
                        }
                        return resolve(rect[0]);
                    })
            })
        },
        getAllRect(context, selector) {
            return new Promise(function(resolve) {
                wx.createSelectorQuery()
                    .in(context)
                    .selectAll(selector)
                    .boundingClientRect()
                    .exec(function(rect) {
                        if (rect === void 0) {
                            rect = [];
                        }
                        return resolve(rect[0]);
                    });
            });
        }
    },
    observers: {
        'active': function(index) {
            this.scrollCenter(index)
        }
    }
})